<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Friends</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../lib/mui/mui.css" />
		<link rel="stylesheet" href="../../css/app.css" />
		<script src="../../lib/mui/mui.js"></script>
		<script src="../../lib/mustache/mustache.min.js"></script>
		<script src="../../lib/framework/z-app.js"></script>
		<style type="text/css">
		</style>
	</head>

	<body>
		<div class="mui-content">
			<!--下拉刷新容器-->
			<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul id="list" class="mui-table-view app-card">
						<li class="mui-table-view-cell">loading...</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script id="list" url="/api/user" type="text/template">
		{{#data}}
		<li class="mui-table-view-cell">
			<a style="padding:0px;" href="javascript:void(0)">
				<div class="app-card-head">
					<img id="{{id}}" class="mui-media-object mui-pull-left" height="50px" style="border-radius:5px;" src="../../img/head.png" />
					{{name}}
					<span app-event="follow" data="{{id}}" class="mui-icon mui-pull-right mui-btn app-no-border app-color-blue mui-icon-plus-filled app-font30"></span>
				</div>
			</a>
		</li>
		{{/data}}
	</script>
	<script>
		App.go({
			init : {
				pullRefresh : {
					// 开启下拉刷新
					down : {
						beforeDefined : function(tpl) {
							App.pageNo = 1;
							App.resetLoadMore();
						}
					},
					// 上拉加载更多
					up : {
						hasMore : function (tpl) {
							var result = tpl.ajax.result;
							var hasMore = App.pageNo <= result.pageCount;
							return hasMore;
						}
					},
				},
			},
			deviceReady : function(){
				App.pageNo = 1;
				App.pageSize = 20;
			},
			events : {
				view : {
					beforeShow : function(e) {
						if (App.ready == true) {
							settings();
						}
					}
				},
				custom : {
					follow : function(e) {
						mui.alert("Follow");
					}
				}
			},
			// 模板渲染
			template : {
				// 定义模板的参数,比如分页参数等
				defined : function(tpl) {
					App.userids = [];
					tpl.ajax.options.data.pageNo = App.pageNo;
					tpl.ajax.options.data.pageSize = App.pageSize;
				},
				// 渲染模板
				render : function(tpl) {
					if (!tpl.ajax.result || typeof tpl.ajax.result == 'undefined') {
						return;
					}
					
					var data = tpl.ajax.result.data;
					if (!data) {
						if (tpl.pullRefresh.down) {
							return "<center>no data</center>";	
						} 
						return " ";
					}
					App.pageNo++;
					// 记住用户ID,用于后面的头像获取
					App.each(data, function(i,v){
						var uid = v.id;
						if (App.contains(App.userids, uid)) {
						} else {
							App.userids.push(uid);
						}
					});
					
					// 准备好你的数据模型
					var model = {
						data : data,
					};
					// 使用'大胡子'模板引擎来渲染
					var output = Mustache.render(tpl.html, model);
					return output;
				},
				complete : function(tpl) {
					// 处理头像图片
					var appid = null;
					var appidkey = plus.storage.getItem('appidkey');
					if (appidkey) {
						appid = plus.storage.getItem(appidkey);
					}
					App.each(App.userids, function(i,uid){
						var d = document.getElementById(uid);
						var path = "api/user/avatars/thumb?user_id="+uid+"&"+appidkey+"="+appid;
						var src = App.opts.init.http.base+'/'+path;
						var oldsrc = d.src;
						d.onerror = function(e){
							d.src = oldsrc;
						}
						d.src = src;
					});
				}
			},
			appReady : function(){
				App.ready = true;
				settings();
			}
		});
		
		function settings() {
			App.notifyParent("settings", {
				buttons : {
					hide : true
				}
			});
		}
	</script>
</html>